// 当表单发生提交行为的时候
// $('#userForm').on('submit', function () {
// 	// 获取到用户在表单中输入的内容并将内容格式化成参数字符串
// 	var formData = $(this).serialize();


$('#addUser').on('click', function () {

	var formData = $('form').serialize();

	// 向服务器端发送添加用户的请求
	$.ajax({
		type: 'post',
		url: '/users',
		data: formData,
		success: function () {
			// 刷新页面
			location.reload();
		},
		error: function () {
			alert('用户添加失败')
		}
	})
	// 阻止表单的默认提交行为
	return false;
});

// 当用户选择文件的时候
$('#modifyBox').on('change', '#avatar', function () {
	// 用户选择到的文件
	// this.files[0]
	var formData = new FormData();
	formData.append('avatar', this.files[0]);
	$.ajax({
		type: 'post',
		url: '/upload',
		data: formData,
		// 告诉$.ajax方法不要解析请求参数
		processData: false,
		// 告诉$.ajax方法不要设置请求参数的类型
		contentType: false,
		success: function (response) {
			console.log(response)
			// 实现头像预览功能
			$('#preview').attr('src', response[0].avatar);
			$('#hiddenAvatar').val(response[0].avatar)
		}
	})
});

// 向服务器端发送请求 索要用户列表数据
$.ajax({
	type: 'get',
	url: '/users',
	success: function (response) {
		console.log(response)
		// 使用模板引擎将数据和HTML字符串进行拼接
		var html = template('userTpl', { data: response });
		// 将拼接好的字符串显示在页面中
		$('#userBox').html(html);
	}
});

// 通过事件委托的方式为编辑按钮添加点击事件
$('#userBox').on('click', '.edit', function () {
	// 获取被点击用户的id值
	var id = $(this).attr('data-id');
	// 根据id获取用户的详细信息
	$.ajax({
		type: 'get',
		url: '/users/' + id,
		success: function (response) {
			console.log(response,9999)
			var html = template('modifyTpl', response);
			$('#modifyBox').html(html);
		}
	})
});

// 为修改表单添加表单提交事件
$('#modifyBox').on('submit', '#modifyForm', function () {
	// 获取用户在表单中输入的内容
	var formData = $(this).serialize();
	// 获取要修改的那个用户的id值
	var id = $(this).attr('data-id');
	// 发送请求 修改用户信息
	$.ajax({
		type: 'put',
		url: '/users/' + id,
		data: formData,
		success: function (response) {
			// 修改用户信息成功 重新加载页面
			location.reload()
		}
	})

	// 阻止表单默认提交
	return false;
});


//删除用户
$('#userBox').on('click', '.delete', function (){
	// 获取被点击用户的id值
	var id = $(this).attr('data-id');
	// 根据id获取用户的详细信息
	$.ajax({
		type: 'delete',
		url: '/users/' + id,
		success: function (response) {
			console.log(response,88877777);
			location.reload()
		}
	})
})

/* 
4、实现全选和反选
    全选：
        1、给全选复选框按钮绑定点击事件 
        2、获取当前全选按钮的状态
        3、给每一个复选框设置状态值为全选按钮的状态值

    反选：
        1、给每一个复选框通过 事件委托 绑定事件 change
        2、获取所有的复选框对象
        3、判断  所有的复选框的个数和选中的个数
            如果相同====全选是选中状态  否则就不选中


*/

/* 全选 */
$('#allSelect').on('change',function(){
	var  chk=$(this).prop('checked')
	//console.log(chk,999);
	$("#userBox").find('input').prop('checked',chk)
})

/* 反选 */

$("#userBox").on('change','input',function(){
	var  inputs=$("#userBox").find('input');
	//console.log(inputs.filter(':checked').length,5566);
	
	if(inputs.length==inputs.filter(':checked').length){
		$('#allSelect').prop('checked',true)
	}else{
		$('#allSelect').prop('checked',false)
	}

	if(inputs.filter(':checked').length>0){
		$('.allDel').show()
	}else{
		$('.allDel').hide()
	}

})

/* 
5、实现批量删除
    1、给批量删除按钮绑定点击事件
    2、获取所有的复选框表单对象进行循环===获取所有的选中的元素
    3、对筛选出来的元素进行循环 ===获取每一个表单元素的自定义属性data-id，并将id值追加到一个空数组ids中
    4、发送ajax请求==要求传递参数ids.join('-')
    5、成功后刷新页面
*/
$('.allDel').on('click',function(){
	var  ids=[]
	var  inputs=$("#userBox").find('input');
	var  checkUser=inputs.filter(':checked')
	checkUser.each(function(index,item){
		ids.push($(item).attr('data-id'))
	})
	console.log(ids);

	$.ajax({
		type: 'delete',
		url: '/users/' + ids.join('-'),
		success: function (response) {
			console.log(response,88877777);
			location.reload()
		}
	})
	
})
